<template>
    <div>
    <h1>病房列表</h1>
    <div>
        病房名称:<input type="text" v-model="query.wardname"/>
        科室名称:
                    <select v-model="query.departmentname">
                        <option value="">请选择</option>
                        <option :value="item.departmentName" v-for="item in list">{{ item.departmentName }}</option>
                    </select>
        <input type="button" value="查询" class="btn btn-primary" @click="showw"/>
    </div>
    <table class="table table=bordered">
        <tbody>
            <tr>
                <td>ID</td>
                <td>病房号</td>
                <td>所属科室</td>
                <td>床位数</td>
                <td>状态</td>
                <td>空床位</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list">
                <td>{{item.wardId}}</td>
                <td>{{item.wardName}}</td>
                <td>{{item.departmentName}}</td>
                <td>{{item.bednumber}}</td>
                <td>{{item.state==0?"启用":"维修"}}</td>
                <td>{{item.nullBedNumber}}</td>
                <td>
                    <input type="button" value="启用" class="btn btn-info" v-if="item.state==1" @click="UpdateState(item.wardId,0)"/>
                    <input type="button" value="维修" class="btn btn-success" v-else   @click="UpdateState(item.wardId,1)"/>
                </td>
            </tr>
        </tbody>
    </table>
    <div>
        <span>每页显示{{ query.pageSize }}条/共{{ data.totalCount }}条</span>
        <span>当前第{{ query.pageIndex }}页/共{{ data.totalPage }}页</span>
        <input type="button" value="首页" @click="Gopage(1)"/>
        <input type="button" value="上一页" @click="Gopage(query.pageIndex-1)"/>
        <span v-for="item in data.totalPage" @click="Gopage(item)">{{ item }}</span>
        <input type="button" value="下一页" @click="Gopage(query.pageIndex+1)"/>
        <input type="button" value="尾页" @click="Gopage(data.totalPage)"/>
    </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import moment from 'moment';
import { useRoute,useRouter } from 'vue-router';
//接收值
const route=useRoute();
//跳转页面
const router=useRouter();

let query:any=reactive
({
    pageIndex:1,
    pageSize:3,
    wardname:'',
    departmentname:''
})
let data:any=reactive
({
    totalCount:'',
    totalPage:'',
    list:[]
})


let list:any=ref([])
onMounted(()=>{
    ShowDepartment();
    showlist();
})
//显示科室信息
const ShowDepartment=()=>
{
   axios
   ({
      url:'/api/Department/ShowDepartment',
      method:'get'
   })
   .then(res=>{
    list.value=res.data;
   })
   .catch(err=>{

   })
}
const showw=()=>
{
    query.pageIndex=1;
    showlist();
}
//显示病房信息
const showlist=()=>
{
   axios
   ({
      url:'/api/Ward/GetWard',
      method:'get',
      params:query
   })
   .then(res=>{
    Object.assign(data,res.data);
   })
   .catch(err=>{

   })
}

const Gopage=(num:any)=>
{
    if(num<1)
    {
        query.pageIndex=1;
        return;
    }
    if(num>data.totalPage)
    {
        query.pageIndex=data.totalPage;
        return;
    }
    query.pageIndex=num;
    showlist();
}



//修改病房状态
const UpdateState=(id:any,state:any)=>
{
    let f=confirm("确认修改吗?")
    {
        if(f)
        {
            axios
            ({
                url:'/api/Ward/UpdateState',
                method:'put',
                params:
                {
                    id:id,
                    state:state
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert("修改成功");
                    showlist();
                    return;
                }
                else
                {
                    alert("修改失败");
                    return;
                }
            })
            .catch(err=>{

            })
        }
    }
}


</script>

<style scoped>

span
{
    margin: 0 10px;
}
input
{
    margin: 0 10px;
}

</style>